<template>
  <div id="aside"
       v-if="this.screenWidth > 768 || (this.screenWidth <= 768 && this.$route.path !== '/guestbook' && this.$route.path !== '/link')">
    <Info :config="this.config"/>
    <Category :activeIndex="this.activeIndex" :category="category"/>
    <ArticleNew v-if="this.$route.name !== 'index'" :articleNew="articleNew"/>
    <ArticleHot v-if="articleHot.length > 0" :articleHot="articleHot"/>
    <CommentNew v-if="commentNew.length > 0" :commentNew="commentNew"/>
    <ArticleLabel v-if="articleLabel.length > 0" :articleLabel="articleLabel"/>
    <Link v-if="this.$route.name === 'index'"/>
  </div>
</template>

<script>
  import Info from './aside/Info'
  import Category from './aside/Category'
  import ArticleHot from './aside/ArticleHot'
  import ArticleNew from './aside/ArticleNew'
  import ArticleLabel from './aside/ArticleLabel'
  import CommentNew from './aside/CommentNew'
  import Link from './aside/Link'

  export default {
    name: "Aside",
    props: {
      activeIndex: '',
      config: null,
      category: null,
      screenWidth: 0,
    },
    components: {
      Info,
      ArticleHot,
      ArticleNew,
      ArticleLabel,
      Category,
      CommentNew,
      Link
    },
    data() {
      return {
        articleNew: [],
        articleHot: [],
        articleLabel: [],
        commentNew: [],
      }
    },
    methods: {
      async getArticleNew() {
        this.articleNew = await this.$common.articleNew()
      },
      async getArticleHot() {
        this.articleHot = await this.$common.articleHot()
      },
      async getArticleLabel() {
        this.articleLabel = await this.$common.articleLabel()
      },
      async getCommentNew() {
        this.commentNew = await this.$common.commentNew()
      },
    },
    mounted() {
      if (this.$route.name !== 'index') {
        this.getArticleNew()
      }
      this.getArticleHot()
      this.getArticleLabel()
      this.getCommentNew()
    }
  }
</script>

<style scoped>

</style>
